<style>
    .fui-cell-group .fui-cell.fui-cell-credit:before{border:none;}
    .fui-cell-group .fui-cell.fui-cell-credit{padding:0.2rem 0.5rem;}
    .fui-cell-group .fui-cell.fui-cell-credit .fui-cell-text{color:#666;font-size:0.6rem;}
    .fui-navbar ~ .fui-content, .fui-content.navbar{padding:0;}
    .fui-footer.btn-disabled{background: #ddd;color: #bbb;line-height: 2.4rem;text-align: center;}
    #basic img{max-width: 100%;display: block;}
.overflow-h3 {
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.comment-scroll { height:135px; display: -webkit-box;overflow-x: scroll;overflow-y: hidden;-webkit-overflow-scrolling:touch;}
.comment-scroll:after {content: ""; height: 1px; width: 100%; position: absolute; left: 0; bottom: 0;}
.comment-scroll::-webkit-scrollbar{width:0; height:0; display: none;}
.comment-scroll .item {height:120px; width:auto; overflow: hidden; text-decoration: none; color:#000; padding: 0.25rem 0.5rem; font-size: 0.75rem;}

</style>
<link rel="stylesheet" href="../addons/jy_jifenyou/resource/css/sys.css?v=2022"/>
<link rel="stylesheet" href="../addons/jy_jifenyou/resource/css/detail.css?v=2021" onload="$('#loadhtml').show()"/>
<div id="loadhtml" style="display:none" class='fui-page  fui-page-current creditshop-detail-page'>
        <div class="fui-header">
            <div class="fui-header-left">
                <a class="back" ng-click="goback()"></a>
            </div>
            <div class="title">商品详情</div>
            <div class="fui-header-right"></div>
        </div>
    <div class='fui-content goods-detail-header goods-detail'>
        <!-- 商品图片 -->
		<div id="carousel-container" class="carousel slide" data-role="carousel" data-param-auto="true">
			<div class="carousel-inner" role="listbox" style="max-height:20rem">
				<div ng-class="{'item':1,'active':$index==0}" ng-repeat="item in pagedata.goods.images">
					<a href="#">
						<img ng-src="{{tomedia(item) || '../core/resource/images/nopic.jpg'}}" style="display: block; width: 100%; height: 100%;">
					</a>
				</div>
			</div>
			<style>
					.fui-swipe-page .fui-swipe-bullet {background: {background}; opacity: {opacity};}
					.fui-swipe-page .fui-swipe-bullet.active {opacity: 1;}
			</style>
			<div id="carousel-jinyun" class="fui-swipe-page" style="padding: 0 5px; bottom: 10px; ">
						<div class="fui-swipe-bullet" ng-repeat="item in pagedata.goods.images" ng-class="{'active':$index==0}" data-target="#carousel-container" data-slide-to="{{$index}}"></div>
			</div>
			<div ng-if="pagedata.goods.timestate && pagedata.goods.istime==1" class="fui-swipe-layer">
                <i class="icon jinyunicon icon-history"></i>
                <span id="divdown1"></span>
            </div>
		</div>
		<div class="prod-info">
			<div class="prod-value">
			<div class="prod-value1">
			<div style="font-size: 14px;"> 商品原价： <span class="prod-value11"><i>¥</i>{{pagedata.goods.price}}</span></div>
			</div>
			<div class="prod-value2"><em>{{pagedata.goods.credit}}</em><span>积分</span><span style="font-size: 30px; vertical-align: bottom;">+</span><em>{{pagedata.goods.money}}</em><span>元</span>
			</div>
			</div>
			<div class="prod-saved"><p>...</p><p class="text">积分抵消</p>
			<p class="num_" style="text-decoration: line-through;">¥{{pagedata.goods.price-pagedata.goods.money}}</p>
			</div>
		</div>
		<div class="prod-info1">
		  <div class="prod-name">
			<span class="prod-tag1">限时兑换</span> {{pagedata.goods.title}}</div>
		  <div class="prod-other">
			<p class="prod-other-free">全场包邮</p>
			<p>兑换热度{{pagedata.goods.salenum}}</p>
		  </div>
		  <div class="prod-time">
			<p class="prod-time11">限时兑换</p>
			<p class="prod-time12">限时限量·过期作废</p>
			<p class="prod-time13" ng-init="tool.time_down(pagedata.rest_time)">
			  <span id="hour" class="time-num">{{pagedata.rest_time.hour}}</span>:
			  <span id="min" class="time-num">{{pagedata.rest_time.minute}}</span>:
			  <span id="sec" class="time-num">{{pagedata.rest_time.second}}</span></p>
		  </div>
		</div>
       <div class="prod-service">
		  <div class="service-item">
			<div class="service-name">库存</div>
			<div class="service-desc service-desc1">还剩：
			  <span>{{pagedata.goods.total}}件</span>
			  <span class="service-desc11">限时抢购</span>
			  <span class="service-desc11">仓库告急</span></div>
		  </div>
		  <div class="service-item">
			<div class="service-name">服务</div>
			<div class="service-desc service-desc2">
			  <span class="service-tag">厂家正品</span>
			  <span class="service-tag">假一赔十</span></div>
		  </div>
		  <div class="service-item">
			<div class="service-name">发货</div>
			<div class="service-desc service-desc3">
			  <i class="icon icon-map" style="font-size:0.7rem"></i>
			  <span>品牌仓库 | 全国配送</span></div>
		  </div>
		</div> 
        <div class="prod-comment" ng-if="pagedata.pingjianums>0">
		  <div class="comment-title">
			<div class="comment-title11">宝贝评价（{{pagedata.pingjianums}}）</div>
			<div class="comment-title12">
			  <span class="comment-rate-num">99.98%</span>好评</div></div>
			<div class="comment-list">
			<div class="comment-scroll">
				<div ng-repeat="item in pagedata.comment" class="slide-comment van-swipe-item item" style="width: 300px; margin-right: 10px;">
				  <div class="user-info">
					<img ng-src="{{tomedia(item.member.avatar) || '../core/resource/images/gw-user.png'}}" class="user-avatar">
					<div class="user-name">{{item.member.nickname}}</div></div>
				  <div class="subtitle overflow-h3">{{item.content}}</div>
				  </div>
			</div>
		  </div>
		</div>
        <div ng-if="pagedata.goods.detailshow==1 || pagedata.set.isdetail==1" class="fui-list-group">
            <div class="fui-list">
                <div class="fui-list-inner">
                    <div class="title">兑换流程</div>
                    <div ng-if="pagedata.goods.detailshow==1" class="text" ng-bind-html="trust(pagedata.goods.detail)"></div>
                    <div ng-if="pagedata.goods.detailshow!=1 && pagedata.set.isdetail==1" class="text" ng-bind-html="trust(pagedata.set.detail)"></div>
   
                </div>
            </div>
        </div>
        <div ng-if="pagedata.goods.noticedetailshow==1 || pagedata.set.isnoticedetail==1" class="fui-list-group">
            <div class="fui-list">
                <div class="fui-list-inner">
                    <div class="title">注意事项</div>
						<div ng-if="pagedata.goods.noticedetailshow==1" class="text" ng-bind-html="trust(pagedata.goods.noticedetail)"></div>
						<div ng-if="pagedata.goods.noticedetailshow!=1 && pagedata.set.isnoticedetail==1" class="text" ng-bind-html="trust(pagedata.set.noticedetail)"></div>
                </div>
            </div>
        </div>
        <div class="fui-tab fui-tab-danger detail-tab" style="margin-top:0.5rem">
            <a ng-click="pagedata.topost=0" ng-class="{'active':pagedata.topost!=1}">商品详情</a>
            <a ng-click="pagedata.topost=1" ng-class="{'active':pagedata.topost==1}">填写订单</a>
        </div>
        <div class="detail-block" style="background:#fff;padding:0.5rem">
            <div ng-if="pagedata.topost!=1 && pagedata.goods.goodsdetail" class="block block-basic tab-basic" ng-bind-html="trust(pagedata.goods.goodsdetail)" id="basic">
            </div>
			<div ng-if="pagedata.topost!=1 && !pagedata.goods.goodsdetail" class="block block-basic tab-basic" id="basic">
				暂无商品详情
            </div>      
            <div ng-if="pagedata.topost==1" id="topost" class="block"> 
				<!--已选参数-->
				<div class="form-card">
				  <div class="order-top">
					<div class="order-top-line"></div>
					<div class="order-top-txt">填写收货信息</div></div>
				  <div class="order-nodelivery">偏远地区不发货新疆、西藏、甘肃、青海、宁夏等
				  </div>
				  <div ng-if="pagedata.selespename" class="specification">
					<div class="label" style="color:#333">产品选择：</div>
					<div class="opts" onclick="$('#showspec').modal();">
					  <span class="item-tag active">{{pagedata.selespename}}{{pagedata.post.num}}件</span>
					 </div>
				  </div>
				  <div class="order-card">
					<div class="fui-cell-group" style="background:none">
						<div class="fui-cell must ">
							<div class="fui-cell-label">收货姓名</div>
							<div class="fui-cell-info"><input type="text" class="fui-input" id="merchname" placeholder="请输入姓名" ng-model="pagedata.post.name"/></div>
						</div>
						<div class="fui-cell must">
							<div class="fui-cell-label">手机号码</div>
							<div class="fui-cell-info"><input type="text" class="fui-input" id="salecate" placeholder="请输入手机号" ng-model="pagedata.post.mobile"/></div>
						</div>
						<div class="fui-cell">
							<div class="fui-cell-label">省市县区</div>		
										<div class="fui-cell-label" style="width:28%">
											<select ng-model="pagedata.post.pcd.province" class="form-control tpl-province">
											<option value="" selected="selected">省份</option>
											<option ng-repeat="(value,data) in pagedata.province" value="{{value}}" ng-selected="pagedata.post.pcd.province==value">{{value}}</option>
											</select>
										</div>
										<div class="fui-cell-label" style="width:28%">
											<select ng-model="pagedata.post.pcd.city" class="form-control tpl-city">
											<option value="" selected="selected">城市</option>
											<option ng-repeat="(value,data) in pagedata.province[pagedata.post.pcd.province]" value="{{value}}" ng-selected="pagedata.post.pcd.city==value">{{value}}</option>
											</select>
										</div>
										<div class="fui-cell-label" style="width:28%">
											<select ng-model="pagedata.post.pcd.district" class="form-control tpl-district">
											<option value="" selected="selected">区县</option>
											<option ng-repeat="(value,data) in pagedata.province[pagedata.post.pcd.province][pagedata.post.pcd.city]" value="{{value}}" ng-selected="pagedata.post.pcd.district==value">{{value}}</option>
											</select>
										</div>
										<!--<div class="fui-cell-label" style="width:28%">
											<select ng-model="pagedata.post.pcd.street" class="form-control tpl-district">
											<option value="" selected="selected">街道</option>
											<option ng-repeat="value in pagedata.province[pagedata.post.pcd.province][pagedata.post.pcd.city][pagedata.post.pcd.district]" value="{{value}}" ng-selected="pagedata.post.pcd.street==value">{{value}}</option>
											</select>
										</div>-->
							
						</div>
						<div class="fui-cell must ">
							<div class="fui-cell-label">详细地址</div>
							<div class="fui-cell-info"><input type="text" class="fui-input" placeholder="详细地址" ng-model="pagedata.post.address"/></div>
						</div>
						<div class="fui-cell">
							<div class="fui-cell-label">备 注</div>
							<div class="fui-cell-info"><input type="text" class="fui-input" placeholder="请输入备注" ng-model="pagedata.post.desc"/></div>
						</div>
					</div>
					<!---->
					<div class="order-info">
					  <p class="order-info11">*您提交的信息将加密发送</p>
					  <p class="order-info12">应付:
						<span>
						  <span style="font-size:1rem">{{pagedata.goods.credit*pagedata.post.num}}</span>积分+{{pagedata.goods.money*pagedata.post.num}}元</span></p>
					</div>
					<button ng-if="!pagedata.order_id" ng-click="pagedata.pay_submit(pagedata.post,'pay','/order/')" class="pay-btn van-button van-button--danger van-button--normal van-button--block">
					  <div class="van-button__content">
						<span class="van-button__text">立即兑换</span></div>
					</button>
					<button ng-if="pagedata.order_id" ng-click="access_json('jy_jifenyou/order/')" class="pay-btn van-button van-button--danger van-button--normal van-button--block">
					  <div class="van-button__content">
						<span class="van-button__text">查看订单</span></div>
					</button>
					<div class="order-info2">本次兑换商品由品牌方提供，如有问题请
					  <span ng-click="access_json('jy_jifenyou/kefu/')" class="connect-cs">联系客服</span></div>
				  </div>
				</div>
            </div>
        </div>
    </div>
	<div ng-if="pagedata.topost!=1" class="bottom-btngroup van-goods-action" style="z-index:118">
	  <div role="button" ng-click="access_json('jy_jifenyou/index/')" tabindex="0" class="van-goods-action-icon">
		<div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
		 </div>首页
	  </div>
	  <div role="button" ng-click="access_json('jy_jifenyou/kefu/')" tabindex="0" class="van-goods-action-icon">
		<div class="van-icon van-icon-service van-goods-action-icon__icon">
		 </div>客服
	  </div>
	  <button ng-if="pagedata.goods.canbuy==1" ng-click="pagedata.settopost()" class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--last van-goods-action-button--danger">
		<div class="van-button__content">
		  <span class="van-button__text">{{ifelse(pagedata.goods.type==1,'立即抽奖','立即兑换')}}</span>
		 </div>
	  </button>
	  <button ng-if="pagedata.goods.canbuy==2" class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--last van-goods-action-button--danger">
		<div class="van-button__content">
		  <span class="van-button__text">{{pagedata.goods.buymsg}}</span></div>
	  </button>
	</div>
</div>
<div id="showspec" class="modal fade" tabindex="-1" style="z-index:99999;display:none;">
<div class="modal-dialog" style="width:100%;left:0;bottom:0">
<div class="modal-content">
    <div class="option-picker ">
	<div class="option-picker-inner">
	<div class="option-picker-cell goodinfo">
	    <div class="closebtn"><i class="icon icon-guanbi1"></i></div>
	    <div class="img"><img class='thumb' src="{{tomedia(pagedata.goods.thumb)}}" /></div>
	    <div class="info info-price text-danger">
			<span>
				￥
				<span class='price' style="font-weight:600">
				{{pagedata.options.price}}
				</span>
			</span>
		</div>
	    <div class="info info-total">
	    	库存 <span class='total'>{{pagedata.options.total}}</span> 件
	    </div>
	<div class="info info-titles" ng-if="pagedata.specs.length>0">请选择规格</div>
	</div>
	<div class="option-picker-options">
	    <div ng-repeat="(k,spec) in pagedata.specs_list" class="option-picker-cell option spec">
		<div class="title">{{spec.title}}</div>
		<div class="select">
		     <a ng-repeat="item in spec.items" href="javascript:;" ng-click="pagedata.post.specid[k]=item.id;pagedata.get_optionsid();" ng-class="{'btn btn-default btn-sm nav spec-item':1,'btn-select':pagedata.post.specid[k]==item.id}"> {{item.title}} </a>
		</div>
	    </div>
		<div class="fui-cell-group noborder" style="margin-top:0">
			<div class="fui-cell noborder">
			<div class="fui-cell-label">数量</div>
			<div class="fui-cell-info"></div>
			<div class="fui-cell-mask noremark">
				 <div class="fui-number">
					<div class="minus" ng-click="pagedata.minus()">-</div>
					<input class="num" type="tel" name="" value="{{pagedata.post.num}}"/>
					<div class="plus" ng-click="pagedata.plus()">+</div>
				</div>
			</div>
			</div>
		</div>
	</div>
	<div class="fui-navbar">
	    <a href="javascript:;" aria-hidden="true" data-dismiss="modal" class="nav-item btn confirmbtn">确定</a>
	</div>
    </div>
    </div>
</div>
</div>
</div>
<div ng-include="sys_html('_tanmu')"></div>
<script type="text/javascript">
require(['bootstrap', 'hammer'], function($, Hammer){
		$('#carousel-container').carousel();
		var mc = new Hammer($('#carousel-container').get(0));
		mc.on("panleft", function(ev) {
			$('#carousel-container').carousel('next');
		});
		mc.on("panright", function(ev) {
			$('#carousel-container').carousel('prev');
		});
		
});
scope.pagedata.pay_submit=function(post,post_url,complete_url){
	var str = /^[1][3,4,5,7,8][0-9]{9}$///手机
    var strname =  /^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/ //中文
	if(!(str.test(post.mobile))){
		scope.message("请输入正确的手机号码！",'error')
		return false;
	}
	if(!post.name){
		scope.message("请输入姓名！",'error')
		return false;
	}
	if(!post.address){
		scope.message("请输入收货地址！",'error')
		return false;
	}
	scope.post_json(post_url,post,function(result){
		scope.pagedata.order_id=result.order_id;
		var success_url=result.success_url?result.success_url:complete_url
		var error_url=result.error_url?result.error_url:complete_url
		scope.$evalAsync();
		scope.tool.pay(result.pay_id,function(res){
				if(res.type=='success'){
					scope.message('支付成功！','success',success_url);
				}else{
					scope.message('支付失败！','success',error_url);
				}
		},'','','jy_jifenyou/order/');
	});
}
//减少
scope.pagedata.minus=function(){
	if(scope.pagedata.post.num <=1){
		return false;
	}
	scope.pagedata.post.num--;
	scope.$evalAsync();
}
//增加
scope.pagedata.plus=function(){
	scope.pagedata.post.num++;
	scope.$evalAsync();
}
//选择
scope.pagedata.get_optionsid=function(){
	var specid = scope.pagedata.post.specid;
		specid = specid.join('_');
	var params={
		data:{'specid':specid},
		op:'get_optionsid',
		callback:function(res){
			scope.pagedata.post.optionid=res.options.id;
			scope.pagedata.options=res.options;
			scope.pagedata.selespename=res.selespename;
			scope.pagedata.goods.money=res.options.price;
			scope.pagedata.goods.credit=res.options.credit;
			scope.$evalAsync();
		}
	};
	scope.post_json(params);
}

</script>
<script>
scope.pagedata.settopost=function(){
	scope.pagedata.topost = 1;
	scope.$evalAsync();
	setTimeout(function(){
		var element = document.getElementById('topost');
		element.scrollIntoView();
		element.scrollIntoView(false);
		element.scrollIntoView({block: "start"});
		element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
	},200);
}
</script>
